<template>
  <el-table ref="autoTable" size='mini'
            border stripe default-expand-all
            row-key="id"
            :data="data"
            tooltip-effect="dark"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            style="width: 100%"
            cell-class-name='custom-table'
            @cell-click="handleClickCells"
            @row-click="handleClickRow"
            @selection-change="handleSelectionChange">
   <!--左侧自定义插槽-->
    <slot name="before"></slot>
    <!--左侧是否有勾选-->
    <el-table-column v-if="isChecked" fixed="left" label="全选" type="selection" width="40"></el-table-column>
    <!--循环表格-->
    <el-table-column v-for="(item, key) in title" :label="item.label" :width="item.width" :key="key" :show-overflow-tooltip="true">
      <template slot-scope="scope">
        <span v-if="item.event" class="customize-link" @click="handleTableEvent(item.event, scope.$index, scope.row)">
          <span>{{scope.row[item.prop]}}</span>
          <el-link type="primary" size="mini">{{item.text}}</el-link>
        </span>
        <span v-else-if="item.filter">{{item.filter(scope.row[item.prop])}}</span>
        <span v-else>{{scope.row[item.prop]}}</span>
      </template>
    </el-table-column>
    <!--右侧自定义插槽-->
    <slot name="after"></slot>
    <!--右侧按钮集合-->
    <el-table-column v-if="event.length" fixed="right" :width="event.length*70" label="操作">
      <template slot-scope="scope">
        <span class="customize-link" v-for="(item, key) in event" :key="key" @click="handleTableEvent(item.event, scope.$index, scope.row)">
          <el-link :type="item.type" :icon="item.icon" size="mini">{{item.label}}</el-link>
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import mixins from './mixins'
export default {
  name: 'index',
  title: '自动表格',
  mixins: [mixins],
  props: {
    isChecked: {
      type: Boolean,
      default: false
    },
    title: {
      type: Array,
      default: () => ([])
    },
    data: {
      type: Array,
      default: () => ([])
    },
    event: {
      type: Array,
      default: () => ([])
    },
    upload: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      headerCellStyle: { background: 'rgba(0,0,0,0.1)', height: '50px', color: '#606266', 'text-align': 'left' },
      cellStyle: { 'text-align': 'left' }
    }
  },
  mounted () {
  },
  methods: {
    // 表格选择行
    handleSelectionChange (row) {
      this.$emit('checkRow', row, this.$refs.autoTable)
    },
    // 表格操作事件
    handleTableEvent (event, index, row) {
      this.$emit(event, index, row)
    },
    // 单击行
    handleClickRow (row, column, event) {
      this.$emit('clickRow', row, column, event)
    },
    // 选择某个单元格
    handleClickCells (row, column, cell, event) {
      this.$emit('clickCell', row, column, cell, event)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep.el-table--enable-row-transition .el-table__body {
  .customize-link{
    padding: 0 5px;
  }
}
</style>
